<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { regionData } from 'element-china-area-data'
import type { FormInstance, FormRules } from 'element-plus'

import CardDialog from './CardDialog.vue'

const props = withDefaults(defineProps<{
    closeShopCar: Function
}>(), {
    closeShopCar: () => {}
})
const state = reactive({
    tableData: [],
    programme: '',
    programmeList: [
        {value: 1, label: '方案1'}
    ],
    selectedOptions: []
})
const visible = ref(false)
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    name: string
    phone: string
    address: Array<any>
    detailAddress: string
}

const ruleForm = reactive<RuleForm>({
    name: '',
    phone: '',
    address: [],
    detailAddress: ''
})

const rules = reactive<FormRules<RuleForm>>({
    name: [ { required: true, message: '请输入收货人姓名', trigger: 'blur' },  ],
    phone: [ { required: true, message: '请输入收货人手机号', trigger: 'blur' },  ],
    detailAddress: [ { required: true, message: '请输入收货人详细地址信息', trigger: 'blur' },  ],
    address: [
        {
            required: true,
            message: '请选择收货人地址',
            trigger: 'change',
        },
    ], 
})


const previewInfo = (id: number) => {

}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const handleChange = () => {
    
}

const selectOtherAddress = () => visible.value = true;
const closeShopCar = () => props.closeShopCar();
</script>

<template>
    <main class="shop-car-wrapper">
        <section class="flex-c-s">
            <h3>购物车列表</h3>
            <el-button type="primary"  :icon="ArrowLeft" @click="closeShopCar">返回</el-button>
        </section>
        <section class="line"></section>
        <section>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
                <el-form-item label="选择方案">
                    <el-select v-model="state.programme" placeholder="选择方案" class="w100">
                        <el-option v-for="item in state.programmeList" :key="item.value"
                            :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
        </section>
        <section class="line"></section>
        <section>
            <h3 class="color-primary">商品信息</h3>
            <section class="line"></section>
            <el-table :data="state.tableData" style="width: 100%" border> 
				<el-table-column label="商品名称" prop="orderPrice" />
				<el-table-column label="类型" prop="cellPrice" />
				<el-table-column label="规格" prop="buyCount"  />
				<el-table-column label="商品售价(元)" prop="buyCount" />
				<el-table-column label="商品数量" prop="buyCount"  />
				<el-table-column label="操作">
					<template #default="scope">
						<el-link :underline="false" type="primary" @click="previewInfo(scope.row)">记录</el-link>
					</template>
				</el-table-column>
				
			</el-table>
        </section>
        <section style="margin-top: 30px;">
            <h3 class="color-primary">地址信息</h3>
            <section class="line"></section>

            <section style="width: 500px;">
                <el-form
                    ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px"  class="demo-ruleForm"
                     status-icon >

                    <el-form-item label="收货人姓名" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入收货人姓名" />
                    </el-form-item>

                    <el-form-item label="收货人手机号" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入收货人手机号" />
                    </el-form-item>

                    <el-form-item label="收货人地址" prop="address">
                        <el-cascader style="width: 500px;"
                             
                            :options="regionData"
                            v-model="ruleForm.address"
                            @change="handleChange">
                            </el-cascader>
                    </el-form-item>

                    <el-form-item label="详细地址" prop="detailAddress">
                        <el-input v-model="ruleForm.detailAddress" placeholder="请输入详细地址" />
                    </el-form-item>

                    <el-form-item label="其他地址" >
                        <el-button @click="selectOtherAddress">+ 选择其他址</el-button>
                    </el-form-item>
                   
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                    </el-form-item>
                </el-form>
            </section>
        </section>

        <CardDialog v-model="visible"  />
    </main>
</template>

<style lang='scss' scoped>
.flex-c-s {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.line {
    background: #ededed;
    height: 1px;
    margin: 20px 0;
}
</style>